﻿/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

body
{
    background-color: #000066;/*#9799FF;*/   
}

#header
{
    position: relative;
    margin-bottom: 0px;
    color: White;
    padding: 0;
    min-height: 150px;
}

#header h1
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px !important;
}

#main
{
    padding: 30px 30px 15px 30px;
    border-radius: 30px 30px 30px 30px;
    margin-bottom: 30px;
    min-height: 300px;
    color : Black;  
    background-color: White;/*#9799FF;*/
    position : relative;
}

#footer
{
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0;
    font-size: .9em;
}

a
{
    color : White;
    text-decoration : none;
}

/* MENU */
.menu_button_first
{
     border-radius: 30px 0px 0px 30px;  
    margin-right : 0px;
    margin-left : 0px;            
}

.menu_button
{
    border-radius: 0px;
    margin-right : 0px;
    margin-left : 0px;    
        
}

.menu_button_last
{
    border-radius: 0px 30px 30px 0px; 
    margin-right : 0px;
    margin-left : 0px;        
}

#menu ul
{
    list-style-type : none;
    display : inline;
    margin : 0px;
    padding : 0px;
}

#menu li
{
    list-style-type : none;
    display : inline;
    margin : 0px;
    padding : 0px;
}

#menu
{
    float : right;
    position : absolute;
    bottom : 5px;
    right : 5px;  
    z-index : 99; 
}

/*##################*/
div#title
{
    display:block;
    text-align:left;
}

#logo
{
    float:left;
    border-color: White;
    border: 0;
}

#logo a img
{
    border: 0;
}

#logindisplay
{
    font-size:1.1em;
    display:block;
    text-align:right;
    margin:10px;
    left: 5px;
    float:right;
    min-height : 70px;
    position : relative;
}

#logindisplay > p
{
    position : absolute;
    top : 5px;
    right : 5px;
}

/* PROFILE */

#profile-content .display-label, #profile-content .display-field, #profile-content .editor-label, #profile-content .editor-field
{
    padding-left : 5px;
} 

#profile-content .editor-field > input
{
    width : 100%;   
}

#profile .display-field 
{
    background-color : White;
    border-radius : 5px;
}

#profile-form
{
    width : 80%;
    display : inline-block;
}

#profile img
{
    width : 150px;
    height : 150px;
    margin-right : 10px;
}

#profile .ui-state-default:first-child, #profile .ui-state-active:first-child, #profile .ui-state-hover:first-child
{
    background : #FF712B;   
    color: White;      
}

#profile .ui-state-default:last-child, #profile .ui-state-active:last-child, #profile .ui-state-hover:last-child
{
    background : #000066;   
    color: White;      
}

#profile .ui-state-default a, #profile .ui-state-active a, #profile .ui-state-hover a
{
    color : White;   
}


#profile-content
{
    background-color : #FF712B;
    padding : 10px;
    margin : 10px;
    border-radius : 10px;
    min-width : 600px;
}

#voluteering-content
{
    margin-left : 10px; 
}

#voluteering-content > .container
{
    width : 48%;    
}
/* DISPLAY LOCATIONS */
.left
{
    float : left;
    margin-right : 1%;
    width : 32%;
}

.center
{
    float : left;
    width : 33%;
}

.right
{    
    margin-left : 1%;
    float : right;
    width : 32%;
}

/* CONTAINERS */
.container
{
    position : relative;
    display : inline-block;
    width : 100%;
}

.container_header
{
    background-color : #000066;
    border-radius : 20px 20px 0px 0px;     
    min-height : 15px;
    padding-left : 20px; 
    padding-right : 20px; 
    color : White;  
}

.container_header > p 
{
    margin : 0;   
}

.container_body
{
    border : 1px solid #000066;
    max-height : 200px;
    overflow-y : auto; 
}

.container_body > p
{
    margin-left : 5px;
    margin-right : 5px;   
}

.container_footer
{
    background-color : #000066;
    border-radius : 0px 0px 20px 20px;   
    min-height : 15px;
    margin-bottom : 5px;  
}

/* SCHEDULE */
.scheduler
{
    width : 100%;  
}

.scheduler td:not(:first-child), .schedule tr
{ 
    border : 1px solid black;    
}

.scheduler-selected
{
    background-color : Red;   
}

/* NEWS */
#news-div
{
    display : inline-block; 
    width : 66%;  
}

select
{
    width : 100%;   
}